<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/login.css">
    <script type="text/javascript" src="js/plugins/vue/dist/vue.js"></script>
    <script type="text/javascript" src="js/plugins/axios/dist/axios.js"></script>
    <script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
    <script src="js/bootstrap.min.js" charset="UTF-8"></script>
    <script src="js/jquery.form.js" charset="UTF-8"></script>
    <script src="js/global.js" charset="UTF-8"></script>
    <script src="js/login.js" charset="UTF-8"></script>
    <script src="js/common.js"></script>
    <title>XXX - 登录 / 注册</title>
</head>
<body>
<div class="public-head-layout container">
    <a class="logo" href="index.html"><img src="images/icons/logo.jpg" alt="XXX" class="cover"></a>
</div>
<div style="background:url(images/login_bg.jpg) no-repeat center center; ">
    <div class="login-layout container">
        <div class="form-box login">
            <div class="tabs-nav">
                <h2>欢迎登录XXX平台</h2>
            </div>
            <div class="tabs_container">
                <form class="tabs_form" action="" method="post" id="login_form">
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
                            </div>
                            <input class="form-control phone" name="phone" id="login_phone" required
                                   placeholder="手机号" maxlength="11" autocomplete="off" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
                            </div>
                            <input class="form-control password" name="password" id="login_pwd" placeholder="请输入密码"
                                   autocomplete="off" type="password">
                            <div class="input-group-addon pwd-toggle" title="显示密码"><span
                                    class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
                        </div>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input checked="" id="login_checkbox" type="checkbox"><i></i> 30天内免登录
                        </label>
                        <a href="javascript:;" class="pull-right" id="resetpwd">忘记密码？</a>
                    </div>
                    <!-- 错误信息 -->
                    <div class="form-group">
                        <div class="error_msg" id="login_error">
                            <!-- 错误信息 范例html
                            <div class="alert alert-warning alert-dismissible fade in" role="alert">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <strong>密码错误</strong> 请重新输入密码
                            </div>
                             -->
                        </div>
                    </div>
                    <button class="btn btn-large btn-primary btn-lg btn-block submit" id="login_submit" type="button">
                        登录
                    </button>
                    <br>
                    <p class="text-center">没有账号？<a href="javascript:;" id="register">免费注册</a></p>
                </form>
                <div class="tabs_div">
                    <div class="success-box">
                        <div class="success-msg">
                            <i class="success-icon"></i>
                            <p class="success-text">登录成功</p>
                        </div>
                    </div>
                    <div class="option-box">
                        <div class="buts-title">
                            现在您可以
                        </div>
                        <div class="buts-box">
                            <a role="button" href="index.html" class="btn btn-block btn-lg btn-default">继续访问商城</a>
                            <a role="button" href="udai_welcome.html"
                               class="btn btn-block btn-lg btn-info">登录会员中心</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="myApp" class="form-box register">
            <div class="tabs-nav">
                <h2>欢迎注册<a href="javascript:;" class="pull-right fz16" id="reglogin">返回登录</a></h2>
            </div>
            <div class="tabs_container">
                <form class="tabs_form" action="index.html" method="post" id="register_form">
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
                            </div>
                            <input v-model="formParams.mobile" class="form-control phone" name="phone" id="register_phone" required
                                   placeholder="手机号" maxlength="11" autocomplete="off" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-control-box input-group">
                            <input v-model="formParams.imageCode" type="text" id="captcha" placeholder="输入图形验证码" class="input-small form-control phone"
                                   style="width: 70%;border-radius: 4px"
                                   name="MobileRegisterModel[captcha]">
                            <label class="captcha">
                                <img id="captcha-image-temp" @click="getImageCode"
                                     class="captcha-image-temp" :src="imageCode" alt="点击换图" title="点击换图"
                                     style="vertical-align: middle; cursor: pointer;">
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <input class="form-control" v-model="formParams.smsCode" name="smscode" id="register_sms" placeholder="输入手机验证码"
                                   type="text">
                            <span class="input-group-btn">
									<button class="btn btn-primary getsms" type="button" @click="sendSmsCode">发送短信验证码</button>
								</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
                            </div>
                            <input class="form-control password" v-model="formParams.password" name="password" id="register_pwd"
                                   placeholder="请输入密码" autocomplete="off" type="password">
                            <div class="input-group-addon pwd-toggle" title="显示密码"><span
                                    class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
                        </div>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input checked="" id="register_checkbox" type="checkbox"><i></i> 同意<a
                                href="temp_article/udai_article3.html">XXX用户协议</a>
                        </label>
                    </div>
                    <!-- 错误信息 -->
                    <div class="form-group">
                        <div class="error_msg" id="register_error"></div>
                    </div>
                    <button class="btn btn-large btn-primary btn-lg btn-block submit" id="register_submit"
                            type="button" @click="submitRegister">注册
                    </button>
                </form>
                <div class="tabs_div">
                    <div class="success-box">
                        <div class="success-msg">
                            <i class="success-icon"></i>
                            <p class="success-text">注册成功</p>
                        </div>
                    </div>
                    <div class="option-box">
                        <div class="buts-title">
                            现在您可以
                        </div>
                        <div class="buts-box">
                            <a role="button" href="index.html" class="btn btn-block btn-lg btn-default">继续访问商城</a>
                            <a role="button" href="udai_welcome.html"
                               class="btn btn-block btn-lg btn-info">登录会员中心</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-box resetpwd">
            <div class="tabs-nav clearfix">
                <h2>找回密码<a href="javascript:;" class="pull-right fz16" id="pwdlogin">返回登录</a></h2>
            </div>
            <div class="tabs_container">
                <form class="tabs_form" action="https://rpg.blue/member.php?mod=logging&action=login" method="post"
                      id="resetpwd_form">
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
                            </div>
                            <input class="form-control phone" name="phone" id="resetpwd_phone" required
                                   placeholder="手机号" maxlength="11" autocomplete="off" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <input class="form-control" name="sms" id="resetpwd_sms" placeholder="输入验证码"
                                   type="text">
                            <span class="input-group-btn">
									<button class="btn btn-primary getsms" type="button">发送短信验证码</button>
								</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
                            </div>
                            <input class="form-control password" name="password" id="resetpwd_pwd"
                                   placeholder="新的密码" autocomplete="off" type="password">
                            <div class="input-group-addon pwd-toggle" title="显示密码"><span
                                    class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></div>
                        </div>
                    </div>
                    <!-- 错误信息 -->
                    <div class="form-group">
                        <div class="error_msg" id="resetpwd_error"></div>
                    </div>
                    <button class="btn btn-large btn-primary btn-lg btn-block submit" id="resetpwd_submit"
                            type="button">重置密码
                    </button>
                </form>
                <div class="tabs_div">
                    <div class="success-box">
                        <div class="success-msg">
                            <i class="success-icon"></i>
                            <p class="success-text">密码重置成功</p>
                        </div>
                    </div>
                    <div class="option-box">
                        <div class="buts-title">
                            现在您可以
                        </div>
                        <div class="buts-box">
                            <a role="button" href="index.html" class="btn btn-block btn-lg btn-default">继续访问商城</a>
                            <a role="button" href="login.html" class="btn btn-block btn-lg btn-info">返回登陆</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $(document).ready(function () {
                // 判断直接进入哪个页面 例如 login.php?p=register
                switch ($.getUrlParam('p')) {
                    case 'register':
                        $('.register').show();
                        break;
                    case 'resetpwd':
                        $('.resetpwd').show();
                        break;
                    default:
                        $('.login').show();
                }
                ;
                // 发送验证码事件
                $('.getsms').click(function () {
                    var phone = $(this).parents('form').find('input.phone');
                    var error = $(this).parents('form').find('.error_msg');
                    switch (phone.validatemobile()) {
                        case 0:
                            // 短信验证码的php请求
                            error.html(msgtemp('验证码 <strong>已发送</strong>', 'alert-success'));
                            $(this).rewire(60);
                            break;
                        case 1:
                            error.html(msgtemp('<strong>手机号码为空</strong> 请输入手机号码', 'alert-warning'));
                            break;
                        case 2:
                            error.html(msgtemp('<strong>手机号码错误</strong> 请输入11位数的号码', 'alert-warning'));
                            break;
                        case 3:
                            error.html(msgtemp('<strong>手机号码错误</strong> 请输入正确的号码', 'alert-warning'));
                            break;
                    }
                });
                // 以下确定按钮仅供参考
                $('.submit').click(function () {
                    var form = $(this).parents('form')
                    var phone = form.find('input.phone');
                    var pwd = form.find('input.password');
                    var error = form.find('.error_msg');
                    var success = form.siblings('.tabs_div');
                    var options = {
                        beforeSubmit: function () {
                            console.log('喵喵喵')
                        },
                        success: function (data) {
                            console.log(data)
                        }
                    }
                    // 验证手机号参考这个
                    switch (phone.validatemobile()) {
                        case 1:
                            error.html(msgtemp('<strong>手机号码为空</strong> 请输入手机号码', 'alert-warning'));
                            return;
                            break;
                        case 2:
                            error.html(msgtemp('<strong>手机号码错误</strong> 请输入11位数的号码', 'alert-warning'));
                            return;
                            break;
                        case 3:
                            error.html(msgtemp('<strong>手机号码错误</strong> 请输入正确的号码', 'alert-warning'));
                            return;
                            break;
                    }
                    // 验证密码复杂度参考这个
                    switch (pwd.validatepwd()) {
                        case 1:
                            error.html(msgtemp('<strong>密码不能为空</strong> 请输入密码', 'alert-warning'));
                            return;
                            break;
                        case 2:
                            error.html(msgtemp('<strong>密码过短</strong> 请输入6位以上的密码', 'alert-warning'));
                            return;
                            break;
                        case 3:
                            error.html(msgtemp('<strong>密码过于简单</strong><br>密码需为字母、数字或特殊字符组合', 'alert-warning'));
                            return;
                            break;
                    }
                    form.ajaxForm(options);
                    // 请求成功执行类似这样的事件
                    // form.fadeOut(150,function() {
                    // 	success.fadeIn(150);
                    // });
                })
            });
        </script>
    </div>
</div>

<script type="text/javascript">

    $().ready(function() {
        new Vue({
            el:"#myApp",
            data(){
                return {
                    imageCodePrefix:"data:image/jpg;base64,",
                    imageCode:'',
                    formParams:{
                        mobile:'18244444444',
                        password:'123456',
                        imageCode:'',
                        smsCode:'',
                        regChannel:1
                    }
                }
            },
            methods:{
                createUuid(){
                    var s = [];
                    var hexDigits = "0123456789abcdefghi";
                    for (var i = 0; i < 36; i++) {
                        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                    }
                    s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
                    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
                    s[8] = s[13] = s[18] = s[23] = "-";

                    var uuid = s.join("");
                    return uuid;
                },
                getImageCode(){
                    //发送请求到后台获取数据  VerifycodeController
                    let imageCodeKey = sessionStorage.getItem("registerImageCodeKey");
                    if(!imageCodeKey || imageCodeKey === ''){
                        imageCodeKey = this.createUuid();
                        sessionStorage.setItem("registerImageCodeKey",imageCodeKey);
                    }
                    this.$http.get("/common/verifycode/imageCode/"+imageCodeKey).then(res=>{
                        //res.data :就是base64编码后的图片的字符串
                        this.imageCode = this.imageCodePrefix+res.data.data;
                    })
                },
                submitRegister(){
                    //4.发送ajax请求
                    this.$http.post("/user/user/register",this.formParams).then(res=>{
                        var ajaxResult = res.data;
                        if(ajaxResult.success){
                            $.alert("注册成功");
                            window.location.href = "http://127.0.0.1:80/login.html";
                        }else{
                            $.alert("发送失败:"+ajaxResult.message);
                        }
                    })
                },
                sendSmsCode(event){
                    //1.判断手机号不为空
                    if(!this.formParams.mobile){
                        $.alert("手机号不能为空");
                        return;
                    }

                    //2.判断图片验证码不为空
                    if(!this.formParams.imageCode){
                        $.alert("图片验证码不能为空");
                        return;
                    }

                    //3.获取按钮，禁用按钮
                    var sendBtn = $(event.target);
                    sendBtn.attr("disabled",true);

                    var param = {
                        mobile: this.formParams.mobile,
                        imageCode:this.formParams.imageCode,
                        imageCodeKey:sessionStorage.getItem("registerImageCodeKey")
                    };


                    //4.发送ajax请求
                    this.$http.post("/common/verifycode/sendSmsCode",param).then(res=>{
                        var ajaxResult = res.data;
                        if(ajaxResult.success){
                            $.alert("手机验证码已经发送到您的手机，请在10分钟内使用");
                            //4.1.发送成：倒计时
                            var time = 60;

                            var interval = window.setInterval( function () {
                                //每一条倒计时减一
                                time = time - 1 ;

                                //把倒计时时间搞到按钮上
                                sendBtn.html(time+"秒后重发");

                                //4.2.倒计时完成恢复按钮
                                if(time <= 0){
                                    sendBtn.html("重新发送");
                                    sendBtn.attr("disabled",false);
                                    //清除定时器
                                    window.clearInterval(interval);
                                }
                            },1000);
                        }else{
                            //4.3.发送失败：提示，恢复按钮
                            sendBtn.attr("disabled",false);
                            $.alert("发送失败:"+ajaxResult.message);
                        }
                    }).catch(error => {
                        //4.3.发送失败：提示，恢复按钮
                        sendBtn.attr("disabled",false);
                        $.alert("发送失败:"+error.message);
                    })
                }
            }
            ,
            mounted(){
                this.getImageCode();
            }
        });


        $(".user_protocol").click(function() {
            if($.modal($(this))) {
                $.modal($(this)).show();
            } else {
                var modal = $.modal({
                    title: "用户注册协议",
                    trigger: $(this),
                    content: $("#user_protocol").html()
                });
                modal.addButton({
                    text: "同意协议并继续",
                    click: function() {
                        $("input[type='checkbox']").prop("checked", true);
                        $("#btn_submit").removeAttr("disabled");
                        this.hide();
                    }
                });
            }
        });
    });
</script>

<div class="footer-login container clearfix">
    <ul class="links">
        <a href="">
            <li>网店代销</li>
        </a>
        <a href="">
            <li>U袋学堂</li>
        </a>
        <a href="">
            <li>联系我们</li>
        </a>
        <a href="">
            <li>企业简介</li>
        </a>
        <a href="">
            <li>新手上路</li>
        </a>
    </ul>
    <!-- 版权 -->
    <p class="copyright">
        © 2005-2017 XXX 版权所有，并保留所有权利<br>
        ICP备案证书号：闽ICP备XXX号-2&nbsp;&nbsp;&nbsp;&nbsp;福建省宁德市XXX&nbsp;&nbsp;&nbsp;&nbsp;Tel: XXX&nbsp;&nbsp;&nbsp;&nbsp;E-mail:
        XXX@qq.com
    </p>
</div>
</body>
</html>